<!--  -->
<template>
  <div class="screening">
    <div class="conditions">
      <span>关键词：</span>
      <el-input placeholder="请输入内容" class="inputs"></el-input>
      <el-radio v-model="radio" label="1" class="clos">精准匹配</el-radio>
      <el-radio v-model="radio" label="2" class="clos">模糊查询</el-radio>
    </div>
    <div class="recommend">
      <div class="dropdown">
        <span>省份地区：</span>
        <el-select v-model="value" placeholder="所有地区" class="slets">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            class="slets"
          >
          </el-option>
        </el-select>
      </div>
      <div class="dropdown">
        <span> 国标行业：</span>
        <el-select v-model="value" placeholder="全部行业" class="slets">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            class="slets"
          >
          </el-option>
        </el-select>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <span>关键词：</span>
        <el-select v-model="value" placeholder="全部行业" class="slets">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            class="slets"
          >
          </el-option>
        </el-select>
      </div>
      <div class="dropdown">
        <span>持牌机构：</span>
        <el-select v-model="value" placeholder="全部机构" class="slets">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            class="slets"
          >
          </el-option>
        </el-select>
      </div>
      <div class="options">
        <span> 搜索范围：</span>
        <el-button type="primary" plain class="btns">不限</el-button>
        <el-button type="primary" plain class="btns">标签</el-button>
        <el-button type="primary" plain class="btns">三标签</el-button>
        <el-button type="primary" plain class="btns">四字标签</el-button>
        <el-button type="primary" plain class="btns">标签</el-button>
        <el-button type="primary" plain class="btns">五个字标签</el-button>
        <el-button type="primary" plain class="btns">六个多字标签</el-button>
      </div>
      <div class="options">
        <span> 企业类型：</span>
        <el-button type="primary" plain class="btns">不限</el-button>
        <el-button type="primary" plain class="btns">标签</el-button>
        <el-button type="primary" plain class="btns">三标签</el-button>
        <el-button type="primary" plain class="btns">四字标签</el-button>
        <el-button type="primary" plain class="btns">标签</el-button>
        <el-button type="primary" plain class="btns">五个字标签</el-button>
        <el-button type="primary" plain class="btns">三标签</el-button>
        <el-button type="primary" plain class="btns">四字标签</el-button>
        <el-button type="primary" plain class="btns">六个多字标签</el-button>
      </div>
      <div class="options">
        <span> 企业划分：</span>
        <el-button type="primary" plain class="btns">不限</el-button>
        <el-button type="primary" plain class="btns">标签</el-button>
        <el-button type="primary" plain class="btns">三标签</el-button>
        <el-button type="primary" plain class="btns">四字标签</el-button>
        <el-button type="primary" plain class="btns">标签</el-button>
        <el-button type="primary" plain class="btns">五个字标签</el-button>
      </div>
      <div class="options">
        <span> 资产规模：</span>
        <el-button type="primary" plain class="btns">不限</el-button>
        <el-button type="primary" plain class="btns">标签</el-button>
        <el-button type="primary" plain class="btns">三标签</el-button>
        <el-button type="primary" plain class="btns">四字标签</el-button>
        <el-button type="primary" plain class="btns">标签</el-button>
        <el-button type="primary" plain class="btns">五个字标签</el-button>
      </div>
      <div class="options">
        <span> 营收水平： </span>
        <el-button type="primary" plain class="btns">不限</el-button>
        <el-button type="primary" plain class="btns">标签</el-button>
        <el-button type="primary" plain class="btns">三标签</el-button>
        <el-button type="primary" plain class="btns">四字标签</el-button>
      </div>
      <div class="options">
        <span> &emsp;净利润：</span>
        <el-button type="primary" plain class="btns">不限</el-button>
        <el-button type="primary" plain class="btns">标签</el-button>
        <el-button type="primary" plain class="btns">三标签</el-button>
        <el-button type="primary" plain class="btns">四字标签</el-button>
        <el-button type="primary" plain class="btns">标签</el-button>
        <el-button type="primary" plain class="btns">五个字标签</el-button>
      </div>
      <div class="options">
        <span> 规上企业： </span>
        <el-button type="primary" plain class="btns">不限</el-button>
        <el-button type="primary" plain class="btns">标签</el-button>
        <el-button type="primary" plain class="btns">三标签</el-button>
        <el-button type="primary" plain class="btns">四字标签</el-button>
        <el-button type="primary" plain class="btns">标签</el-button>
        <el-button type="primary" plain class="btns">五个字标签</el-button>
      </div>
      <div class="options">
        <span>成立年限：</span>
        <el-button type="primary" plain class="btns">不限</el-button>
        <el-button type="primary" plain class="btns">标签</el-button>
        <el-button type="primary" plain class="btns">三标签</el-button>
        <el-button type="primary" plain class="btns">四字标签</el-button>
        <el-button type="primary" plain class="btns">标签</el-button>
        <el-button type="primary" plain class="btns">五个字标签</el-button>
      </div>
      <div class="options">
        <span> 登记状态：</span>
        <el-button type="primary" plain class="btns">不限</el-button>
        <el-button type="primary" plain class="btns">标签</el-button>
        <el-button type="primary" plain class="btns">三标签</el-button>
        <el-button type="primary" plain class="btns">四字标签</el-button>
      </div>
      <div class="options">
        <span> 组织机构：</span>
        <el-button type="primary" plain class="btns">不限</el-button>
        <el-button type="primary" plain class="btns">标签</el-button>
        <el-button type="primary" plain class="btns">三标签</el-button>
        <el-button type="primary" plain class="btns">四字标签</el-button>
      </div>
      <div class="mores">
        <el-select v-model="value" placeholder="显示更多筛选项" class="slets">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            class="slets"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="recomts">
      <i>每日推送新增</i>
      <el-button size="medium">去订阅</el-button>
      <el-button size="medium" type="primary">查看结果</el-button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      radio: '1',
      options: [
        {
          value: '选项1',
          label: '全部地区',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
      value: '',
    }
  },
  created() {},
  methods: {},
  beforeDestroy() {},
}
</script>

<style lang='scss' scoped>
.screening {
  span {
    display: block;
    width: 70px;
    height: 32px;
    // text-align: right;
    line-height: 32px;
    // color: #8c8e90;
  }
  .conditions {
    margin-top: 27px;
    margin-left: 44px;
    display: flex;
    height: 38px;
    align-items: center;
    margin-bottom: 16px;
    span {
      color: #8c8e90;
    }
    .inputs {
      width: 310px;
      height: 38px;
      margin-right: 31px;
      margin-left: 20px;
    }
    .clos {
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: center;
      color: #373c51;
      line-height: 32px;
    }
  }
  .recommend {
    margin-left: 30px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    span {
      color: #8c8e90;
    }
    .dropdown {
      margin-top: 15px;
      width: 100%;
      display: flex;
      height: 32px;
      .slets {
        margin-left: 24px;
        width: 120px;
        height: 32px;
        border: 0px;
        .el-input__inner {
          border: 0px;
          height: 32px;
        }
      }
    }
    .options {
      margin-top: 15px;
      width: 100%;
      height: 32px;
      display: flex;
      .btns {
        height: 32px;
        width: auto;
        margin-left: 30px;
        border: 0px;
        text-align: center;
      }
    }
    .mores {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 18px 0;
    }
  }
  .recomts {
    border-top: 1px solid #f0f2f5;
    display: flex;
    width: auto;
    margin-right: 29px;
    justify-content: end;
    height: 84px;
    align-items: center;
    i {
      display: block;
      margin-right: 9px;
    }
  }
}
</style>
